<template>
    <div class="theme-setting">
        <a-icon v-show="!isHide" type="setting" class="setting-icon" @click="handleShowDrawer" />
        <a-drawer
            title="主题风格设置"
            placement="right"
            :closable="false"
            :visible="visible"
            @close="handleClose"
            >
            <a-divider>整体风格</a-divider>
            <div class="style-wrap">

                <div v-for="item in styleList" :key="item.id" class="style"
                 :style="`background: ${item.color}`" @click="handleChangeStyle(item.id)">
                  <a-icon v-show="item.id === style.id" type="check" />
                </div>
            </div>
            <a-divider>主题色</a-divider>
            <div class="color-wrap">

                <div v-for="item in colorList" :key="item.color" class="color"
                 :style="`background: ${item.color}`" @click="handleChangeColor(item.color)">
                  <a-icon v-show="item.color === color" type="check" />
                </div>
            </div>
            <a-input type="color" 
            style="width:100px;margin-bottom:10px" v-model="color" @change.native="handleSelectColor"></a-input>
            
            <div class="switch">
              是否显示
              <a-switch v-model="isTempShow" @change="handleShowChange" />
            </div>
            <div>
              <a-button type="primary"  @click="handleSave">保存</a-button>
            </div>
        </a-drawer>

    </div>
    
</template>

<script >

import { styleList, colorList} from "./config";
import Theme from "./Theme";
import echartsThemeController from "../Echarts/EchartsThemeController";


const {
  defaultStyleData,
  defaultColor,
  isHide
} = Theme.getTheme();
echartsThemeController.initThemeList(styleList);

window.less
        .modifyVars({...defaultStyleData.setting,"@primary-color": defaultColor?.color});
echartsThemeController.setTheme(defaultStyleData.id);


export default {
  data() {
    return {
      color: defaultColor?.color,
      style: defaultStyleData,
      visible: false,
      styleList,
      colorList,
      isHide,
      isTempShow: !isHide
    };
  },
  created(){
  },
  methods: {
    /**
     * 显示抽屉
     */
    handleShowDrawer() {
      this.visible = true; 
    },
    /**
     * 关闭抽屉
     */
    handleClose() {
      this.visible = false; 
      this.isTempShow = !this.isHide;
    },
    /**
     * 修改主色
     */
    handleChangeColor(color) {
      console.log(color);
      this.color = color;
      this.changeColor();
    },
    /**
     * 取色
     */
    handleSelectColor(){
      this.changeColor();
    },
    /**
     * 修改主题风格
     */
    handleChangeStyle(id) {
      this.style = this.styleList.find(item => id === item.id);
      this.color = this.style.setting["@primary-color"];
      window.less
        .modifyVars(this.style.setting)
        .then(() => {
          console.log("成功", this.style);
          echartsThemeController.setTheme(this.style.id);
        })
        .catch((error) => {
        //   alert("失败");
          console.log(error);
        });
      
    },
    changeColor() {
      window.less
        .modifyVars({
          ...this.style.setting,
          "@primary-color": this.color
        })
        .then(() => {
          echartsThemeController.setTheme(this.style.id);
        //   console.log("成功", this.color);
        })
        .catch((error) => {
        //   alert("失败");
          console.log(error);
        });
    },
    /**
     * 保存
     */
    handleSave(){
      Theme.setTheme(JSON.stringify({
        styleId: this.style.id,
        color: this.color,
        isHide: !this.isTempShow
      }));
      this.$message.success("保存成功");
      this.visible = false;
      this.isHide = !this.isTempShow;
    },
    handleShowChange(checked){
      this.isTempShow = checked;
      
    }
  },
};
</script>

<style lang="less" scoped>
    .theme-setting {
      z-index: 10;
      position: relative;
    }
    .setting-icon {
        font-size: 20px;
        position: fixed;
        top: 20px;
        right: 20px;
    }
    .style-wrap {
        display: flex;
        margin-bottom: 20px;
        
        .style {
            width: 40px;
            height: 40px;
            margin: 0 10px;
            cursor: pointer;
            border: 1px solid #999;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @primary-color;
        }
    }
    .color-wrap {
      display: flex;
      margin-bottom: 20px;
      .color {
        width: 20px;
        height: 20px;
        margin: 0 10px;
        cursor: pointer;
        border: 1px solid @bg;
        display: flex;
        align-items: center;
        justify-content: center;
        color: @bg;
      }
    }
    .switch {
      margin: 10px 0;
    }
   
</style>
